<template>
	<div>
		<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">教室设置</span>
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;width: 100%;">
				<Col span="24" style="text-align: left;display: inline-block;">
				<span style="margin: 0 10px ;">年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
				<Select v-model="grade" @on-change="gradeChange" style="width: 150px;text-align: center;">
					<Option v-for="item in gradeList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				
				<Button style="float: right;background-color: orange;color: white;font-size: 14px;margin: 0 45px;" @click="addclassroom">+&nbsp;添加教室</Button>
			</Col>
			</Row>
			<div style="min-height: 300px; padding-bottom:20px ;">
			<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">序号</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">教室</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">绑定班级</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">教室类型</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">教室容量</span>
				</Col>
				<Col span="3" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">操作</span>
				</Col>
			</Row>
			<Row v-for="(item,index) in manageList" :key="item.itemId" style="margin:0 auto;margin:20px 45px 5px 45px;">
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">{{item.itemId}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<span style="font-size: 16px;">{{item.classroom}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">{{item.bindingclassroom}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">{{item.classroomtype}}&nbsp;</span>
				</Col>
				<Col span="3" style="text-align: center;width: 15%;">
				<span style="font-size: 16px;">{{item.classroomcapacity}}&nbsp;</span>
				</Col>
				<Col span="4" style="text-align: center;width: 20%;">
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkedit(index)">编辑&nbsp;</a>
				</Col>
				<Col span="4" style="text-align: center;width: 50%;">
				<a style="font-size: 16px;" @click="xkpkdel(index)">删除&nbsp;</a>
				</Col>
				</Col>
			</Row>
		</div>
		<div v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:550px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
			<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
				<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
			</Row>
			<Row style="font-size: 15px;">
				<Col style="text-align: center;padding: 10px;">
				<span>教&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;室:</span>
				<Select v-model="aclassroom" @on-change="aclassroomChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in aclassroomList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>绑定班级:</span>
				<Select v-model="bingdingclass" @on-change="bingdingclassChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in bingdingclassList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>教室类型:</span>
				<Select v-model="aclassroomtype" @on-change="aclassroomtypeChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in aclassroomtypeList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>教室容量:</span>
				<Select v-model="classroomrongliang" @on-change="classroomrongliangChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in classroomrongliangList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
			</Row>
			<Row style="text-align: center;">
				<Col span="24" style="margin-top:15px">
				<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
				<Button v-if="this.title=='添加教室'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
				<Button v-if="this.title=='编辑教室'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
				</Col>
			</Row>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				obj:"",
				listitemId:"",
				title:"",
				grade:1,
				classroomrongliang:"",
				bingdingclass:"",
				aclassroom:"",
				aclassroomtype:"",
				sortSettingHidden:false,
				classroomrongliangList:[
				{
					value:1,
					label:"10-40人",
				},
				{
					value:2,
					label:"20-40人",
				},
				{
					value:3,
					label:"40-100人",
				},
				
				],
				aclassroomtypeList:[
				{
					value:1,
					label:"普通教室",
					
				},
				{
					value:2,
					label:"高级教室",
				},
				{
					value:3,
					label:"小型教室",
				},
				],
				bingdingclassList:[
				{
					value:1,
					label:"高一(1)班",
				},
				{
					value:2,
					label:"高一(2)班",
				},
				{
					value:3,
					label:"高一(3)班",
				},
				{
					value:4,
					label:"高一(4)班",
				},
				{
					value:5,
					label:"高一(5)班",
				},
				{
					value:6,
					label:"高一(6)班",
				},
				],
				aclassroomList:[
				{
					value:1,
					label:"高一(1)班教室",
				},
				{
					value:2,
					label:"高一(2)班教室",
				},
				{
					value:3,
					label:"高二(1)班教室",
				},
				{
					value:4,
					label:"高二(2)班教室",
				},
				{
					value:5,
					label:"高三(1)班教室",
				},
				{
					value:6,
					label:"高三(2)班教室",
				},
				],
				gradeList: [
					{
						value: 1,
						label: "全部",
					},{
					
						value: 2,
						label: "高一",
					},
					{
						value: 3,
						label: "高二",
					},
					{
						value: 4,
						label: "高三",
					},
					{
						value: 5,
						label: "初一",
					},
					{
						value: 6,
						label: "初二",
					},
					{
						value: 7,
						label: "初三",
					},
					
				],
				manageList: [
					{
						itemId: "01",
							classroom:"高一(1)班教室",
							bindingclassroom:"高三1班",
							classroomtype:"普通教室",
							classroomcapacity:"20-40人",
					},
					{
						itemId: "02",
							classroom:"高一(2)班教室",
							bindingclassroom:"高三2班",
							classroomtype:"普通教室",
							classroomcapacity:"20-40人",
					},
					{
						itemId: "03",
							classroom:"高一(3)班教室",
							bindingclassroom:"高三3班",
							classroomtype:"高级教室",
							classroomcapacity:"20-100人",
					},
					{
						itemId: "04",
							classroom:"高一(4)班教室",
							bindingclassroom:"高三4班",
							classroomtype:"普通教室",
							classroomcapacity:"20-40人",
					},
					{
						itemId: "05",
							classroom:"高一(5)班教室",
							bindingclassroom:"高三5班",
							classroomtype:"小型教室",
							classroomcapacity:"10-40人",
					},
					{
						itemId: "06",
							classroom:"高一(6)班教室",
							bindingclassroom:"高三6班",
							classroomtype:"普通教室",
							classroomcapacity:"20-40人",
					},
					{
						itemId: "07",
							classroom:"高一(7)班教室",
							bindingclassroom:"高三7班",
							classroomtype:"普通教室",
							classroomcapacity:"20-40人",
					},
					
				],
			}
		},
		methods:{
			gradeChange:function(){},
			addclassroom:function(){
				this.sortSettingHidden=true
				this.title="添加教室"
				this.classroomrongliang="10-40人"
				this.bingdingclass="高一(1)班"
				this.aclassroom="高一(1)班教室"
				this.aclassroomtype="普通教室"
			},
			xkpkedit: function(index) {
				this.obj=index
				this.title="编辑教室"
				this.sortSettingHidden=true
				this.listitemId=this.manageList[index].itemId
				this.classroomrongliang=this.manageList[index].classroomcapacity
				this.bingdingclass=this.manageList[index].bindingclassroom
				this.aclassroom=this.manageList[index].classroom
				this.aclassroomtype=this.manageList[index].classroomtype
			},
			xkpkdel: function(index) {
				this.manageList.splice(index, 1)
			},
			savesort:function(){
				this.sortSettingHidden=false
				this.manageList.push({
					itemId:"0"+(this.manageList.length+1),
					classroom:this.aclassroom,
					bindingclassroom:this.bingdingclass,
					classroomtype:this.aclassroomtype,
					classroomcapacity:this.classroomrongliang,
				})
				alert("保存成功")
			},
			cancel:function(){
				this.sortSettingHidden=false
			},
			aclassroomChange:function(){},
			classroomrongliangChange:function(){},
			bingdingclassChange:function(){},
			aclassroomtypeChange:function(){},
			editsavesort:function(){
				this.sortSettingHidden=false
				this.manageList.splice(this.obj, 1, {
					itemId:this.listitemId,
					classroom:this.aclassroom,
					bindingclassroom:this.bingdingclass,
					classroomtype:this.aclassroomtype,
					classroomcapacity:this.classroomrongliang,
				})
				alert("保存成功")
			},
		},
	}
</script>

<style>
</style>